<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="嘉沃科技,智慧农业">
<meta name="description" content="嘉沃科技 智慧农业">
<title>生产流程</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <link rel="shortcut icon" type="image/x-icon" href="${basePath}/resources/common/favicon.ico" media="screen" />
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="${basePath}/resources/adminlte/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${basePath}/resources/common/libs/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="${basePath}/resources/common/libs/ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="${basePath}/resources/adminlte/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="${basePath}/resources/adminlte/plugins/iCheck/square/red.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div>
		<input type="hidden" id="batchId" name="batchId" value="${batchId}"/>
		
		<div class="box box-default">
			<div class="box-header with-border">
				<div id="flowNode" class="row" style="padding-left: 10px; padding-right: 10px;">
					<!-- <div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" onclick="loadNodeData()">种植</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >浇水</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >施肥</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >除草</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >打药</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >扬花</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >采摘</button>
					</div>
					<div class="col-xs-4 col-sm-3" style="padding: 5px;">
							<button type="button" class="btn btn-block btn-success" >包装</button>
					</div> -->
				</div>
				
				<!-- /.box-tools -->
			</div>
			<!-- /.box-header -->
			<div class="box-body">
				<ul id="workData" class="timeline timeline-inverse">
					<li class="time-label"><span class="bg-green"> 2018.05.12 </span></li>
					<li><i class="fa fa-camera bg-purple"></i>
						<div class="timeline-item" style="margin-left: 52px; margin-right: 0px;">
							<span class="time"><i class="fa fa-clock-o"></i> 17:50:00</span>
							<h3 class="timeline-header">
								<a href="#">小马哥</a> 第一次施加追肥
							</h3>

							<div class="timeline-body" style="padding:2px;">
								<img src="http://192.168.1.105:8888/uploadPath/file/20180609200421386_images1.png" alt="..." style="width: 130px;height: 90px;margin: 2px;">
								<img src="http://192.168.1.105:8888/uploadPath/file/20180609200421473_images2.png" alt="..." style="width: 130px;height: 90px;margin: 2px;">
								<img src="http://192.168.1.105:8888/uploadPath/file/20180609200421482_images3.png" alt="..." style="width: 130px;height: 90px;margin: 2px;">
							</div>
						</div>
					</li>
					
					<li class="time-label"><span class="bg-green"> 2018.05.12 </span></li>
					<li><i class="fa fa-user bg-aqua"></i>
						<div class="timeline-item" style="margin-left: 52px; margin-right: 0px;">
							<span class="time"><i class="fa fa-clock-o"></i> 19:15:00</span>

							<h3 class="timeline-header no-border">
								<a href="#">周文武</a> 第二次追肥
							</h3>
						</div></li>
					<li class="time-label"><span class="bg-green"> 2018.05.12 </span></li>
					<li><i class="fa fa-camera bg-purple"></i>
						<div class="timeline-item" style="margin-left: 52px; margin-right: 0px;">
							<span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
							<h3 class="timeline-header">
								<a href="#">大马哥</a> 追根肥
							</h3>
							<div class="timeline-body" style="padding:2px;">
								<img src="http://192.168.1.105:8888/uploadPath/file/20180609200421473_images2.png" alt="..." class="margin" style="width: 150px;height: 100px;margin: 7px;">
								<img src="http://192.168.1.105:8888/uploadPath/file/20180609200421482_images3.png" alt="..." class="margin" style="width: 150px;height: 100px;margin: 7px;">
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		

	</div>
<script src="${basePath}/resources/adminlte/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="${basePath}/resources/adminlte/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="${basePath}/resources/adminlte/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="${basePath}/resources/adminlte/dist/js/app.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/common/js/base.js"></script>

<script>

var batchId = $("#batchId").val();
$(function() {
	initFlowNode();
});


function initFlowNode() {
	var url = '${basePath}/mobile/getPnodeByBatchId/'+batchId;
	$.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(data){
        	if (data && data.length > 0) {
        		var nodeHtml = '';
        		var firstNode;
    			for (var i = 0; i < data.length; i++) {
    				if(i == 0){
    					firstNode = data[i].id;
    				}
    				nodeHtml += '<div class="col-xs-4 col-sm-3" style="padding: 5px;">';
    				nodeHtml += '<button type="button" class="btn btn-block btn-success" onclick="loadNodeData(\''+data[i].id+'\')">'+data[i].name+'</button></div>';
    			}
    			$("#flowNode").empty();
    			$("#flowNode").append(nodeHtml);
    			loadNodeData(firstNode);
    		}
        }
    });
}

function loadNodeData(nodeId){
	var url = '${basePath}/mobile/getScglDataByMobile/'+nodeId+'/'+batchId;
	$.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(data){
        	$("#workData").empty();
        	if (data && data.length > 0) {
        		var workDataHtml = '';
        		for (var i = 0; i < data.length; i++) {
        			workDataHtml += '<li class="time-label"><span class="bg-green"> '+data[i].date+' </span></li>';
        			workDataHtml += '<li><i class="fa fa-camera bg-purple"></i>';
        			workDataHtml += '<div class="timeline-item" style="margin-left: 52px; margin-right: 0px;">';
        			workDataHtml += '<span class="time"><i class="fa fa-clock-o"></i> '+data[i].time+' </span>';
        			workDataHtml += '<h3 class="timeline-header">';
        			workDataHtml += '<a href="#">'+data[i].operats+'</a>';
        			workDataHtml += '</h3>';
        			workDataHtml += '<div class="timeline-body" style="padding:2px;">';
        			var images = data[i].images;
        			console.info(images);
        			if(images && images.length >0){
        				for(var k = 0; k < images.length; k++){
        					workDataHtml += '<img src="${basePath}'+images[k]+'" alt="..." style="width: 130px;height: 90px;margin: 2px;">';
        				}
        			}
        			workDataHtml += '</div>';
        			workDataHtml += '</div>';
        			workDataHtml += '</li>';
        			workDataHtml += ' ';
					
        		}
        		
    			$("#workData").append(workDataHtml);
    		}
        }
    });
	
	
	
	
}


</script>

</body>
</html>
